<!--
 * @Description: 初始化风场
 * @Date: 2023-05-29 14:17:07
 * @LastEditors: yrg
 * @LastEditTime: 2023-05-29 15:11:38
 * @FilePath: \cesium-wind-field\src\App.vue
-->
<template>
  <div class="btns">
    <button @click="handleShow">显示</button>
    <button @click="handleClose">隐藏</button>
  </div>
  <div id="cesiumContainer"></div>

  <canvas ref="wind" id="wind"></canvas> 
</template>


<script setup>
  import { onMounted } from 'vue';
  import { initMap } from './utils/initMap'
  import { windyUtil } from './utils/wind/windyUtil'

  
  onMounted(() => {
    initMap()
    addWind()
  })

  function addWind() {
    import('./assets/json/2023052914.json').then(res => {
      let newdata = res.default
      console.log(newdata)
      let cnavasId = 'wind'
      window.windyUtilExample = new windyUtil(cnavasId)
      console.log(windyUtilExample,'windyUtilExample')
      windyUtilExample.createWindLayer(newdata)
    })
  }
  function handleClose() {
    windyUtilExample.hideWindy()
  }
  function handleShow() {
    windyUtilExample.showWindy()
  }

</script>

<style>
.btns {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
}

html,body,#app{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
#cesiumContainer {
  width: 100%;
  height: 100%;
}
#wind {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}
</style>
